<template>
  <div class="login-message">
    <form>
      <ul class="left">
        <li class="hint">
          <label id="hint"> {{ hintSentence }} </label>
        </li>
        <li class="login-input">
           <label>用户名：</label>
           <input v-model="userName" id="user-name" class="login-input" placeholder="请输入用户名" >
        </li>
        <li class="login-input">
            <label>密&nbsp;&nbsp;&nbsp;&nbsp;码：</label>
            <input v-model="userPassword" id="user-password" class="login-input" placeholder="请输入密码" >
        </li>
        <li class="login-submit">
            <FunctionButtons @click.native="logIn" buttonName="登录"></FunctionButtons>
        </li>
      </ul>
    </form>
  </div>
</template>

<script>
/* eslint-disable */
import FunctionButtons from './Button.vue'
import PageName from '../components/PageName.vue'

export default {
  name: 'LoginMessage',
  data: function () {
    return {
      userName: '',
      userPassword: ''
    }
  },
  props: {
    hintSentence: {
      type: String,
      default: '欢迎您！请您登录！'
    }
  },
  components: {
    FunctionButtons,
    PageName
  },
  methods: {
    sleep: function (time) {
      return new Promise((resolve) => setTimeout(resolve, time))
    },
    logIn: function () {
      console.log('start')
      const app = tcb.init({ env: 'rhythm-8gijcn1i263ac8ec' })

      const auth = app.auth()

      auth.anonymousAuthProvider().signIn() // 匿名登录，实际业务时根据需要进行调整
        .then(() => {
          console.log('数据库用户登录成功') // 登录成功
        }).catch(err => {
          console.log('数据库用户登录失败', err) // 登录失败
        })

      const db = app.database()
      db.collection('user')
        .where({
          uname: this.userName,
          password: this.userPassword
        })
        .get()
        .then((res) => {
          if (res.data.length > 0) {
            this.$store.state.UserName = this.userName
            this.$store.state.IsLogin = true
            this.$store.state.LoginTip = '登录成功！'
            db.collection('log')
              .add({
                uid: this.userName,
                op: '用户登录',
                time: Date.now()
              })
            this.$store.state.LoginTipShow = true
            setTimeout(() => {
              this.$store.state.LoginTipShow = false
            }, 5000)
            // this.$router.push('/loading')
            // this.sleep(50)
            // this.$router.push('/')
          } else {
            this.$store.state.LoginTip = '登录失败，请检查用户名或密码！'
            this.$store.state.LoginTipShow = true
            setTimeout(() => {
              this.$store.state.LoginTipShow = false
            }, 2000)
          }
        })
    }
  }
}
</script>

<style scoped>
li {
  width: 100%;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}
ul {
  list-style: none;
}
label {
  width: 100px;
  font-size: 20px;
  font-weight: 700;
}
#hint {
  width: 200px;
}
.login-input input {
  width: 200px;
  height: 40px;
  border-radius: 5px;
  border: 0;
  /* box-sizing: border-box; */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 1);
}
</style>
